<template>
  <div class="body-panel">
    <div class="camera-view" v-for="(camera, index) in 1" :key="index">
      <div class="main-content-title">
        <span class="text-style-title"
          ><CameraFilled
            style="width: 1.3rem; height: 1.3rem; margin-right: 4px"
          />Camera
          <el-tooltip
            class="box-item"
            effect="dark"
            content="(Camera)"
            placement="bottom-end"
          >
            <QuestionFilled
              style="
                width: 1.3rem;
                height: 1.3rem;
                margin-left: 4px;
                color: #2483d1;
              "
            />
          </el-tooltip>
        </span>
        <span class="text-style-title">
          <!-- <FullScreen
            v-if="!isCameraFullScreen"
            style="
              width: 1.3rem;
              height: 1.3rem;
              margin-right: 4px;
              color: #2483d1;
            "
            @click="fullScreen(0)"
          />
          <CloseBold
            v-else
            style="
              width: 1.3rem;
              height: 1.3rem;
              margin-right: 4px;
              color: #2483d1;
            "
            @click="fullScreen(0)"
          /> -->
          <el-dropdown
            size="small"
            split-button
            type="primary"
            @command="dropCameraCommand"
          >
            <CameraFilled
              style="width: 1.5rem; height: 1.5rem; margin-right: 4px"
            />Combine
            <!-- {{ curCamera }} -->
            <template #dropdown>
              <el-dropdown-menu>
                <template v-for="item in cameraList" :key="item">
                  <el-dropdown-item :command="item.CameraName">{{
                    item.CameraName
                  }}</el-dropdown-item>
                </template>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <ArrowDownBold
            v-if="!cameraShow"
            style="width: 1rem; height: 1rem; margin-left: 8px"
            @click="cameraShow = !cameraShow"
          />
          <ArrowUpBold
            v-else
            style="width: 1rem; height: 1rem; margin-left: 8px"
            @click="cameraShow = !cameraShow"
          />
        </span>
      </div>

      <div class="camera-view-box">
        <div style="display: flex; width: 100%; height: 100%; flex-wrap: wrap">
          <div style="width: 50%; height: 100%">
            <img
              v-if="src1"
              class="camera-video"
              id="stream"
              :src="`http://${src1}:81/stream`"
              crossorigin=""
            />

            <img
              v-else
              v-show="curCamera != 'Main' && !curIp"
              class="camera-video"
              id="stream"
              src="/src/assets/camera.png"
              crossorigin=""
            />
            <img
              v-if="src2"
              class="camera-video"
              id="stream"
              :src="`http://${src2}:81/stream`"
              crossorigin=""
            />
            <img
              v-else
              v-show="curCamera != 'Main' && !curIp"
              class="camera-video"
              id="stream"
              src="/src/assets/camera.png"
              crossorigin=""
            />
          </div>
          <div style="width: 50%; height: 100%">
            <img
            v-if="src3"
              class="camera-video"
              id="stream"
              :src=" `http://${src3}:81/stream` 
              "
              crossorigin=""
            />
            <img
              v-else
              v-show="curCamera != 'Main' && !curIp"
              class="camera-video"
              id="stream"
              src="/src/assets/camera.png"
              crossorigin=""
            />
            <img
            v-if="src4"
              class="camera-video"
              id="stream"
              :src="
                `http://${src4}:81/stream` 
              "
              crossorigin=""
            />
            <img
              v-else
              v-show="curCamera != 'Main' && !curIp"
              class="camera-video"
              id="stream"
              src="/src/assets/camera.png"
              crossorigin=""
            />
          </div>
        </div>
        <div class="camera-view-control" v-if="false">
          <div class="camera-view-control-box">
            <div class="camera-view-control-box-item">
              <span>Resolution</span>
              <el-dropdown
                split-button
                type="primary"
                @click="handleClick"
                @command="dropCommand"
              >
                {{ curResolution }}
                <template #dropdown>
                  <el-dropdown-menu>
                    <template v-for="(item, index) in resolutionList">
                      <el-dropdown-item :command="item.label">{{
                        item.label
                      }}</el-dropdown-item>
                    </template>

                    <!-- <el-dropdown-item>Action 2</el-dropdown-item>
                            <el-dropdown-item>Action 3</el-dropdown-item>
                            <el-dropdown-item>Action 4</el-dropdown-item>
                            <el-dropdown-item>Action 5</el-dropdown-item> -->
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </div>
            <div class="camera-view-control-box-item">
              <span>Quality</span>
              <el-input-number
                v-model="quality"
                :min="4"
                :max="63"
                @change="handleChangeQuality"
              />
            </div>
          </div>
          <div class="camera-view-control-box">
            <div class="camera-view-control-box-item">
              <span>AEC DSP</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="Automatic Exposure Control Digital Signal Control"
                placement="bottom-end"
              >
                <QuestionFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-left: 4px;
                    color: #2483d1;
                  "
                />
              </el-tooltip>
              <div>
                <el-radio-group v-model="acedsp" @change="handleChangeAecDsp">
                  <el-radio-button label="开" value="1" />
                  <el-radio-button label="关" value="0" />
                </el-radio-group>
              </div>
            </div>
            <div class="camera-view-control-box-item">
              <span style="width: 4.375rem">BPC</span>
              <el-tooltip
                class="box-item"
                effect="dark"
                content="Bad Pixel Correction"
                placement="bottom-end"
              >
                <QuestionFilled
                  style="
                    width: 1.3rem;
                    height: 1.3rem;
                    margin-left: 4px;
                    color: #2483d1;
                  "
                />
              </el-tooltip>
              <div>
                <el-radio-group v-model="bpc" @change="handleChangeBpc">
                  <el-radio-button label="开" value="1" />
                  <el-radio-button label="关" value="0" />
                </el-radio-group>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- <img id="stream" class="camera-video" src="http://192.168.1.206:81/stream" crossorigin=""></img> -->
    </div>
    <div class="tool-view"></div>
  </div>
</template>
<script setup>
import { ref, watch } from "vue";
import axios from "axios";
const cameraList = ref([
  { CameraName: "Main", value: "" },
  { CameraName: "Front", value: "" },
  { CameraName: "Left", value: "" },
  { CameraName: "Right", value: "" },
  { CameraName: "Back", value: "" },
  { CameraName: "Combine", value: "" },
]);

const props = defineProps([
  "curResolution",
  "quality",
  "bpc",
  "curCamera",
  "acedsp",
  "ipList",
]);
// cosnt srcList = ref([]);
const src1 = ref("");
const src2 = ref("");
const src3 = ref("");
const src4 = ref("");
const emit = defineEmits(["handleInfo"]);
const curResolution = ref("800*600");
const resolutionList = ref([
  {
    label: "1600*1200",
    value: "15",
  },
  {
    label: "1280*1024",
    value: "14",
  },
  {
    label: "1280*720",
    value: "13",
  },
  {
    label: "1024*768",
    value: "12",
  },
  {
    label: "800*600",
    value: "11",
  },
  {
    label: "640*480",
    value: "10",
  },
]);
const quality = ref("12");
const acedsp = ref("1");
const bpc = ref("1");
// 1
// 1
const curCamera = ref("");
watch(async (curCamera) => {
  console.log("curCamera", props);

  quality.value = props.quality;
  acedsp.value = props.acedsp;
  bpc.value = props.bpc;
  curResolution.value = props.curResolution;
  curCamera.value = props.curCamera;
  console.log("curCamera", curCamera.value);
  if (props.ipList) {
    src1.value = props.ipList.FrontCam?.IP;
    src2.value = props.ipList.BackCam?.IP;
    src3.value = props.ipList.LeftCam?.IP;
    src4.value = props.ipList.RightCam?.IP;
  }
  //   if (curCamera.value == "Combine") {
  //     // props.ipList.forEach((item) => {
  //     //   handleChangeip(item);
  //     // });
  //   }
  await handleChangeipList();
});

const dropCameraCommand = (e) => {
  // const cameraEle = document.getElementsByClassName("camera-video")[0];
  console.log("dropCameraCommand11111111111111", e);
  curCamera.value = e;
  handleEmit();
  // if (curCamera.value == "Main") {
  //   cameraEle.style.height = "100%";
  // } else if (curCamera.value == "Combine") {
  // } else {
  //   cameraEle.style.height = "80%";
  //   // handleChangeip();
  // }
};
const dropCommand = (e) => {
  console.log("dropCommand", e);
  curResolution.value = e;
  handleChangeipList();
};
const handleChangeAecDsp = (e) => {
  console.log("handleChangeAecDsp", e);
  acedsp.value = e;
  handleChangeipList(src1);
};
const handleChangeBpc = (e) => {
  console.log("handleChangeBpc", e);
  bpc.value = e;
  handleChangeipList();
};
const handleChangeQuality = (e) => {
  console.log("handleChangeQuality", e);
  quality.value = e;
  handleChangeipList();
};
const handleChangeipList = () => {
  console.log("handleChangeipList", src1.value);

  // Promise.all(
  //     handleChangeip(src1.value);
  // handleChangeip(src2.value);
  // handleChangeip(src3.value);
  // handleChangeip(src4.value);
  // )
  // handleChangeip(src1.value);
  // handleChangeip(src2.value);
  // handleChangeip(src3.value);
  // handleChangeip(src4.value);
  // 使用 Promise.all 并行处理多个异步操作
  Promise.all([
    handleChangeip(src1.value),
    handleChangeip(src2.value),
    handleChangeip(src3.value),
    handleChangeip(src4.value),
  ])
    .then((results) => {
      // 所有 Promise 都成功解决时执行
      console.log("所有 IP 地址处理完成", results);
    })
    .catch((error) => {
      // 任何一个 Promise 被拒绝时执行
      console.error("处理 IP 地址时出错", error);
    });
};

const handleEmit = () => {
  const params = {
    quality: quality.value,
    acedsp: acedsp.value,
    bpc: bpc.value,
    curCamera: curCamera.value,
    curResolution: curResolution.value,
  };
  console.log("curCamera222222222222222", curCamera.value);
  console.log("handleEmit");
  emit("handleInfo", params);
};
// const handleChangeip = () => {
//   // 定义请求的 URL
//   // const url = "https://api.example.com/data";
// http://Cam_IP/control?var=framesize&val=11   (Resolution)
// http://Cam_IP/control?var=quality&val=12 (Quality)
// http://Cam_IP/control?var=aec2&val=1
// http://Cam_IP/control?var=bpc&val=1
//   // 发起 GET 请求

// };

const handleChangeip = (curIp) => {
  let ramesize = 11;
  if (curResolution.value === "640*480") {
    ramesize = 10;
  } else if (curResolution.value === "800*600") {
    ramesize = 11;
  } else if (curResolution.value === "1024*768") {
    ramesize = 12;
  } else if (curResolution.value === "1280*720") {
    ramesize = 13;
  } else if (curResolution.value === "1280*1020") {
    ramesize = 14;
  } else if (curResolution.value === "1600*1200") {
    ramesize = 15;
  }
  const url1 = `http://${curIp}/control?var=framesize&val=${ramesize}`;
  const url2 = `http://${curIp}/control?var=quality&val=${quality.value}`;
  const url3 = `http://${curIp}/control?var=aec2&val=${acedsp.value}`;
  const url4 = `http://${curIp}/control?var=bpc&val=${bpc.value}`;
  // 定义四个请求的 URL
  const urls = [url1, url2, url3, url4];
  console.log(urls);

  // 使用 Promise.all 同时发起多个 GET 请求
  Promise.all(urls.map((url) => axios.get(url)))
    .then((responses) => {
      // 所有请求都成功时，处理每个响应
      responses.forEach((response, index) => {
        console.log(`请求 ${index + 1} 成功，响应数据：`, response.data);
      });
    })
    .catch((error) => {
      // 如果任何一个请求失败，处理错误
      console.error("请求失败，错误信息：", error);
    });
};
</script>
<style scoped>
.body-panel {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
  color: #fff;
}
.main-content {
  display: flex;
  height: 93vh;
}

.main-content-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* height: 2.5rem; */
  height: 5vh;
  padding: 0 2%;
  background-color: #3a3a3a;
}
.camera-video {
  margin-bottom: 0.625rem;
  width: 100%;
  overflow: hidden;
}

.camera-view-box {
  /* height: 80vh; */
  height: 95vh;
}
.camera-video {
  display: block;
  width: 100%;
  /* height: 80%; */
  /* position: absolute; */
  z-index: 999;
  height: 50%;
  /* height: 45vh; */
  /* height: 55vh; */
  /* height: 80vh; */
  object-fit: cover;
  /* border-radius: 0 0 0.5rem 0.5rem; */
  transition: transform 0.3s;
  margin: 0;
  padding: 0;
}
.video1 {
  height: 100%;
}

.camera-video:hover {
  /* transform: scale(1.05); */
}

.camera-view-control {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 19%;
  background-color: #262629;
  border-radius: 0.625rem;
}
/* .camera-view-control:nth-child(n){
  flex: 1;
} */
.camera-view-control-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
  height: 100%;
}
.camera-view-control-box div {
  margin: 0.25rem 0;
}
.camera-view-control-box-item {
  display: flex;
  flex: 1;
  align-items: center;
  /* justify-content: center; */
  justify-content: space-between;
  padding: 0 1.25rem;
  box-sizing: border-box;
}
.camera-view-control-box-item span {
  margin-right: 0.625rem;
}
</style>
